{extend name="common/layout"}
<!-- 标题文字 -->
{block name="title"}后台首页{/block}
<!-- 模块名称 -->
{block name="name"}后台首页{/block}
<!-- 模块介绍 -->
{block name="desc"}会当凌绝顶、一览众山小{/block}
<!-- 菜单选择 -->
{block name="menu"}admin/auth/nodes.html{/block}
<!-- 页内样式 -->
{block name="style"}

{/block}

<!-- 内容-->
{block name="content"}
<div id="app">
    <div class="box">
        <div class="box-header with-border">
            <!--<a class="btn btn-primary btn-sm btn-add_node" onclick="history.go(-1);"  href="javascript:;">返回</a>-->
            <h3 class="box-title">节点列表({{module_name}})</h3>

            <div style="height: 10px;"></div>
            <p v-if="is_load">正在加载</p>
            <div><a class="btn btn-success btn-sm btn-add_module" v-on:click="showAdd" href="javascript:;"><i class="glyphicon glyphicon-plus"></i>添加节点</a></div>
        </div>
        <div class="box-body">
            <table class="table table-bordered">
                <tr >
                    <th>节点名</th>
                    <th>路径</th>
                    <th>排序</th>
                    <th>节点位置</th>
                    <th>是否显示</th>
                    <th>操作</th>
                </tr>
                <tr v-for="obj in lists" v-bind:data-id="obj.id" >
                    <td>{{obj.name}}</td>
                    <td>{{obj.path}}</td>
                    <td>{{obj.sort}}</td>
                    <td>{{obj.position==1?'后台':'前台'}}</td>
                    <td>{{obj.is_show==1?'显示':'隐藏'}}</td>
                    <td><a v-if="node.is_show==1?true:false" v-bind:path="obj.path"  class="btn btn-info btn-sm btn-add_node" v-on:click="toPath" href="javascript:;">跳转</a>
                        <a class="btn btn-warning btn-sm btn-add_node" v-on:click="showEdit" href="javascript:;">编辑</a>
                        <a class="btn btn-danger btn-sm btn-add_node" v-on:click="del" href="javascript:;">删除</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="box-footer clearfix">
            <div id="pagination" class="pagination pagination-sm no-margin "></div>
        </div>
    </div>


    <div class="modal fade" id="addNode"  tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form class="form-horizontal" >
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">添加节点</h4>
                    </div>
                    <div class="modal-body">


                        <div class="form-group">
                            <label  class="col-sm-3 control-label">节点名称</label>
                            <div class="col-sm-8">
                                <input class="form-control" v-model="name"  placeholder="模块名称"   />
                            </div>
                        </div>

                        <div class="form-group">
                            <label  class="col-sm-3 control-label">路径</label>
                            <div class="col-sm-8">
                                <input class="form-control" v-model="path"  placeholder="路径"  />
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">排序</label>
                            <div class="col-sm-8">
                                <input class="form-control" v-model="sort"  placeholder="排序"  />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">模块位置</label>
                            <div class="col-sm-8">
                                <select  class="form-control" v-model="position">
                                    <option value="0">前台</option>
                                    <option value="1">后台</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">是否显示</label>
                            <div class="col-sm-8">
                                <select v-model="is_show" class="form-control">

                                    <option value="1">显示</option>
                                    <option value="0">隐藏</option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" v-on:click="save" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>


{/block}
<!-- 脚本-->
{block name="script"}
<script src="/admin/jqpaginator.min.js"></script>
<script src="/admin/plugins/layer/layer.js"></script>
<script type="text/javascript">



    var vm = new Vue({

        el:'#app',
        data:{
            lists:[],
            'sort':0,
            'is_show':1,
            'name':'',
            'action':'add',
            'position' : 1,
            'path' : '',
            'id':'',
            'parent_id':0,
            'module_name' : '',
            is_load:true,
            page : 1
        },
        created:function(){
            this.parent_id = this.getQueryString('id');
            //显示模块名
            jQuery.get(url+'/rbac/module',{module_id:this.parent_id},function(res) {
                vm.module_name =  res.data.name;
            });
            //获取数据
            this.getData(this.page);

        },
        methods:{
            showAdd:function (event) {
                this.action = 'add';
                this.sort=0;
                this.is_show = 1;
                this.name='';
                this.path='';
                this.position=1;
                jQuery('#addNode').modal('show');
            },
            showEdit:function (event) {
                this.action = 'edit';
                var id = jQuery(event.target).parents('tr').attr('data-id');
                this.id = id;
                jQuery.get(url+'/rbac/getNode',{node_id:id},function(res) {
                    vm.position =  res.data.position;
                    vm.sort =  res.data.sort;
                    vm.is_show =  res.data.is_show;
                    vm.name =  res.data.name;
                    vm.path =  res.data.path;
                });
                jQuery('#addNode').modal('show');
            },
            save: function (event) {
                if(this.action == 'add') {
                    jQuery.post(url+'/rbac/addNode',
                        {sort:this.sort,is_show:this.is_show,name:this.name,position:this.position,is_access:1,path:this.path,parent_id:this.parent_id},
                        function(res) {
                            vm.getData(vm.page);
                            jQuery('#addNode').modal('hide')
                        });
                }else{
                    jQuery.post(url+'/rbac/editNode',
                        {_METHOD :'PUT',id:this.id,sort:this.sort,is_show:this.is_show,name:this.name,is_access:1,position:this.position,path:this.path},
                        function(res) {

                            vm.getData(vm.page);
                            jQuery('#addNode').modal('hide')
                        });
                }
            },
            del:function(event) {
                layer.confirm('确认要删除吗',function() {
                    var id = jQuery(event.target).parents('tr').attr('data-id');
                    jQuery.post(url + '/rbac/delNode', {id: id, '_METHOD': "DELETE"}, function (res) {
                        if (res.code == 200) {
                            layer.alert('删除成功');
                            vm.getData(vm.page);
                        } else {
                            layer.alert('删除失败');
                        }
                    });
                });

            },
            toPath:function (event) {
                var path = jQuery(event.target).attr('path');
                location.href = 'http://'+location.hostname+(location.port ? ':' + location.port : '')+'/'+path;
            },
            getData :function (page){
                jQuery.get(url+'/rbac/nodes',{page:page,'parent_id':this.parent_id},function(res) {
                    if (res.code == 200 && res.data.nodes.length>0) {
                        vm.lists = res.data.lists;
                        //分页插件
                        jQuery.jqPaginator('#pagination', {
                            totalPages: res.data.all_page,
                            visiblePages: 6,
                            currentPage: page,
                            first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
                            prev: '<li class="prev"><a href="javascript:void(0);"><i class="arrow arrow2"><\/i>上一页<\/a><\/li>',
                            next: '<li class="next"><a href="javascript:void(0);">下一页<i class="arrow arrow3"><\/i><\/a><\/li>',
                            last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
                            page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
                            onPageChange: function (num, type) {
                                if(type != 'init'){
                                    vm.page = num;
                                    getData(num);
                                }
                            }
                        });
                    }else{
                        layer.alert('暂无数据');
                        vm.lists = [];
                    }
                    vm.is_load=false;
                });
            },
            getQueryString : function (name) {
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  decodeURI(r[2]); return null;
            }
        }

    });



</script>


{/block}
{/extend}
